<template>
  <div>
    <custom-container ref="customContainerRef" :config="mainConfig"></custom-container>
    <!-- 添加或修改参数配置对话框 -->
    <setForm ref="setFormRef" @changeList="handleQuery" />
  </div>
</template>
<script lang="ts" setup>
import { defineEmits, ref, watch, nextTick, computed, defineAsyncComponent, getCurrentInstance, onBeforeUnmount } from 'vue'
import { Plus, Edit, Delete, Search, Upload, Bottom, Key, UploadFilled } from '@element-plus/icons-vue'
import { ElButton, ElMessageBox, ElMessage, ElSwitch } from 'element-plus'
import { DictDirection } from '@/store/modules/dicts'
import { getData, delData, editData, addData, getDescription } from '@/api/BusinessConfig/amazonAddressManagement'

const setForm = defineAsyncComponent(() => import('./components/setForm.vue'))
const
  ids = ref([]),
  productCodes = ref([]),
  // 非单个禁用
  single = ref(true),
  // 非多个禁用
  multiple = ref(true),
  // 查询
  queryParams = ref({
    pageNum: 1,
    pageSize: 10,
  }),
  customContainerRef = ref(null),
  setFormRef = ref(null),
  {
    appContext: {
      config: {
        globalProperties: { $resetForm, $download },
      },
    },
  } = getCurrentInstance()
// 列表选择
const handleSelectionChange = (rows: { [key: string]: any }[]) => {
  ids.value = rows.map((item) => item.userId)
  productCodes.value = rows.map(el => el.salesProductCode)
  single.value = rows.length != 1
  multiple.value = !rows.length
}
// 查询
const handleQuery = () => {
  queryParams.value.pageNum = 1
  customContainerRef.value.getList()
}
// 新增
const handleAdd = () => {
  setFormRef.value.open = true
  setFormRef.value.title = '新增亚马逊地址'
}
// 修改
const handleUpdate = (row: { [key: string]: any }) => {
  const id = row.id || ids
  setFormRef.value.open = true
  setFormRef.value.title = '修改亚马逊地址'
  setFormRef.value.getList(id)
}
// 删除
const handleDelete = (row: { [key: string]: any }) => {
  console.log(row)
  const amazonId = row.id || ids
  console.log(row.id)
  ElMessageBox.confirm(`"是否确认删除用户编号为"${ amazonId }"的数据项?"`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
  .then(() => delData(amazonId))
  .then((res) => {
    if (res.code === 200) {
      console.log('ss')
      handleQuery()
      ElMessage.success('删除成功')
    } else {
      ElMessage.error(res.msg)
    }
  })
  .catch((error) => {
    if (error == 'cancel') {
      ElMessage.error(error)
    }
  })
}
const mainConfig = computed({
  get() {
    return {
      query: {
        fields: [
          {
            label: '亚马逊编码',
            prop: 'code',
            option: {
              placeholder: '请输入亚马逊编码',
            },
          },
          {
            label: '邮编',
            prop: 'postCode',
            option: {
              placeholder: '请输入邮编',
            },
          },
        ],
        queryParams: queryParams.value,
        formOption: {
          labelWidth: '68px',
        },
      },

      btns: [
        {
          title: '新增',
         
          onclick: handleAdd,
          icon: Plus,
        },
        {
          title: '修改',
         
          type: 'success',
          disabled: single.value,
          icon: Edit,
          onClick: handleUpdate,
        },
        {
          title: '删除',
          onClick: handleDelete,
          type: 'danger',
          disabled: multiple.value,
          icon: Delete,
        },
      ],
      table: {
        columns: [
          {
            type: 'selection',
            width: '55',
          },
          {
            label: '亚马逊编码',
            prop: 'code',
            align: 'center',
          },
          {
            label: '地址',
            prop: 'address',
            align: 'center',
          },
          {
            label: '城市',
            prop: 'city',
            align: 'center',
          },
          {
            label: '省州',
            prop: 'state',
          },
          {
            label: '邮编',
            prop: 'postCode',
          },
          {
            label: '操作',
            align: 'center',
            showOverflowTooltip: false,
            render: (h, params) => {
              const buttons = [
                {
                  title: '修改',
                  icon: Edit,
                  clickFun: handleUpdate,
                },
                {
                  title: '删除',
                  icon: Delete,
                  clickFun: handleDelete,
                },
              ]
              return buttons.map((el) => h(
                ElButton,
                {
                  text: true,type: 'primary',
                  icon: el.icon,
                  onClick: () => {
                    el.clickFun(params.row)
                  },
                },
                {
                  default: () => el.title,
                },
              ))
            },
          },
        ],
        event: {
          onSelectionChange: (rows) => {
            handleSelectionChange(rows)
          },
        },
      },
      api: getData,
    }
  },
  set(val) {
    return val
  },
})
</script>
